<template>
  <div class="feedback-wrapper">
    <div class="feed-bg">
      <h3 class="feed-title"><em class="state">*</em>请选择原因</h3>
      <div class="check-wrapper">
        <van-checkbox-group v-model="result" direction="horizontal">
          <van-checkbox :name="item.id" v-for="(item,index) in option" :key="index">{{item.name}}</van-checkbox>
        </van-checkbox-group>
      </div>
      <van-field
        v-model="message"
        rows="4"
        autosize
        label=""
        class="custom-textarea"
        type="textarea"
        placeholder="请填写您的建议和反馈，字数500字以内"
      />
      <van-field
        v-model="tel"
        required
        label="联系方式"
        placeholder="请输入您的手机号"
      />

      <p class="desc">
        请放心留下您的联系方式，我院将在妥善处理您的投诉意见后，给您反馈。
      </p>
      <div class="upload-wrapper">
        <van-uploader v-model="fileList" :after-read="afterRead" :before-delete="handleDelete" accept="image/*" max-count="4" />
      </div>
    </div>
    <div class="feed-btn-wrapper">
      <van-button type="primary" block @click="handlePost">提交</van-button>
    </div>
  </div>
</template>

<script>
import {
  uploadService,
  feedbackService,
  feedbackOptionService,
} from "@/service/user";
import { mapGetters } from 'vuex';
export default {
  data() {
    return {
      message: "",
      tel: "",
      result: [],
      option: [],
      fileList:[],
      picurl: []
    };
  },

  components: {},

  computed: {
    ...mapGetters(["userInfo"]),
  },
  created() {
    this.fetchOption();
  },
  methods: {
    async fetchOption() {
      let result = await feedbackOptionService();
      if (result.status == 200) {
        this.option = result.data;
      } else {
        this.$toast(result.message);
      }
    },
    async handlePost(){
      let { message, tel, result, picurl } = this;
      if(!this.result.length) return this.$toast('请选择原因')
      let params = {
        type: this.result.join(','),
        content: message,
        tel: tel,
        picurl: picurl.join(','),
        name: this.userInfo.username
      }
      let res = await feedbackService(params)
      if(res.status == 200){
        this.$toast('提交成功')
        this.$router.push({
          path: '/user/feed-status'
        })
      }else{
        this.$toast(res.message)
      }
    },
    handleDelete(file,detail){
      console.log(file,detail,'handleDelete')
      this.picurl.splice(detail.index,1)
      this.fileList.splice(detail.index,1)
      console.log(this.picurl)
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file); //file文件如下图
      var formData = new FormData(); //构造一个 FormData，把后台需要发送的参数添加
      formData.append("files", file.file); //接口需要传的参数
      
      // this.$upload("/single/single/upload", formData).then((res) => {
      //   //将formDate文件上传到阿里云服务器，会返回图片地址
      //   console.log(res, 111111);
      //   let str = res.response_data[0];
      //   this.uploadImages.push(str); //将图片地址存入一个数组中
      // });
      uploadService(formData).then(result => {
        if(result.status == 200){
          this.picurl.push(result.data.name)
        }else{
          this.$toast(result.message)
        }
      })
    },
  },
};
</script>
<style lang='less'>
.feedback-wrapper {
  background: #f5f5f5;
  height: 100vh;
  .van-field__label,
  .feed-title {
    color: #000;
  }
  .desc {
    padding: 10px;
    color: #4ece40;
    font-size: 12px;
    line-height: 35px;
  }
  .upload-wrapper {
    padding: 10px;
  }
  .custom-textarea {
    textarea {
      padding: 10px;
      background: #f5f5f5;
      min-height: 100px;
      border-radius: 5px;
    }
  }
  .check-wrapper {
    padding: 10px;
    .van-checkbox {
      position: relative;
      overflow: visible;
      padding: 0 10px;
      height: 45px;
      text-align: center;
      justify-content: center;
      .van-checkbox__label {
        margin-left: 0;
        color: #999;
      }
      .van-checkbox__icon {
        width: 100%;
        height: 40px;
        padding: 5px 10px;
        border-radius: 30px;
        border: 1px solid #eee;
        position: absolute;
        i {
          display: none;
        }
        &.van-checkbox__icon--checked {
          border: 1px solid #4ECE40;
          & + .van-checkbox__label {
            color: #4ECE40;
          }
        }
      }
    }
  }

  .feed-title {
    font-size: 14px;
    color: #000;
    padding: 10px;
    font-weight: normal;
    .state{
      color: #ff0000;
    }
  }
  .feed-bg {
    background: #fff;
  }
  .feed-btn-wrapper {
    padding: 10px;
  }
}
</style>